/*
* @ddescription: 换货-拒绝换货弹窗
* @Author: liyujie
* @Date: 2020-12-08
*/
<template>
    <div class="wrapper">
        <el-dialog
            title="拒绝换货"
            :visible.sync="dialogVisible"
            width="640px"
            :close-on-click-modal="false"
        >
            <el-input
                v-model="reason"
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 6}"
                placeholder="请输入拒绝换货理由"
                maxlength="20"
                show-word-limit
                :style="{width: '512px'}"
            />
            <span
                slot="footer"
                class="dialog-footer"
                :style="{marginTop: '20px'}"
            >
                <el-button
                    @click="dialogVisible = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :disabled="!reason"
                    :style="{width: '120px'}"
                    @click="handleRefuseExchange()"
                >
                    确 认
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>

export default {
    name: 'RefuseExchange',
    data () {
        return {
            dialogVisible: false,
            reason: '',
            apply_no: ''
        };
    },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.reason = '';
            }
        },
    },
    mounted () {},
    methods: {
        /**
         * @description 打开弹窗
         * @param row
         */
        show (row) {
            this.apply_no = row.apply_no;
            this.dialogVisible = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * 拒绝收货
         */
        handleRefuseExchange() {
            let params = {
                apply_no: this.apply_no,
                type: 2,
                refuse_reason: this.reason
            };

            this.$post('/ShopGoodsOrderCancelApply/verify', params, resp => {
                if (resp.code === 1) {
                    this.dialogVisible = false;
                    this.$emit('update');
                    this.$notify({
                        title: '提示',
                        message: '操作成功',
                        duration: 2000,
                        type: 'success'
                    });
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
// 上传图片
.wrap-price {
    width: 520px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .el-icon-plus {
        color: #999;
        font-size: 30px;
    }
    .wrap-list {
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 4px;
        margin-right: 30px;
        position: relative;
        .wrap-image {
            width: 80px;
            height: 80px;
            border-radius: 4px;
        }
        .wrap-action {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 80px;
            height: 80px;
            border-radius: 4px;
            background: rgba(0,0,0,.7);
            justify-content: center;
            align-items: center;
            display: none;
            i {
                color: #ffffff;
                font-size: 17px;
                cursor: pointer;
            }
            .el-icon-delete {
                margin-left: 17px;
            }
        }
        &:hover {
            .wrap-action {
                display: flex;
            }
        }
    }
    /deep/ .el-upload--picture-card {
        width: 80px;
        height: 80px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background:rgba(242,242,242,1);
    }
}
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
</style>
